<template>
  <div class="video-actions">
    <div class="action-buttons">
      <button 
        class="action-btn" 
        :class="{ 'active': isLiked }" 
        :disabled="isProcessing.like"
        @click="toggleLike"
      >
        <i class="icon-like"></i>
        <span>{{ formatNumber(stats.likes) }}</span>
      </button>
      
      <button 
        class="action-btn" 
        :class="{ 'active': isCoined }" 
        :disabled="isProcessing.coin"
        @click="handleCoinClick"
      >
        <i class="icon-coin"></i>
        <span>{{ formatNumber(stats.coins) }}</span>
      </button>
      
      <button 
        class="action-btn" 
        :class="{ 'active': isCollected }" 
        :disabled="isProcessing.collect"
        @click="handleCollectClick"
      >
        <i class="icon-collect"></i>
        <span>{{ formatNumber(stats.collections) }}</span>
      </button>
      
      <button 
        class="action-btn share-btn" 
        @click="handleShareClick"
      >
        <i class="icon-share"></i>
        <span>{{ shareText || '分享' }}</span>
      </button>
    </div>
    
    <!-- 分享面板 (默认隐藏) -->
    <div v-if="showSharePanel" class="share-panel" @click.stop>
      <div class="share-header">
        <h4>分享到</h4>
        <button class="share-close" @click="showSharePanel = false">&times;</button>
      </div>
      <div class="share-options">
        <button 
          v-for="platform in sharePlatforms" 
          :key="platform.id" 
          class="share-platform"
          :title="`分享到${platform.name}`"
          @click="shareToPlatform(platform.id)"
        >
          <span class="share-icon">{{ platform.icon }}</span>
          <span class="share-name">{{ platform.name }}</span>
        </button>
      </div>
      <div class="share-link">
        <input 
          type="text" 
          :value="shareUrl" 
          readonly 
          class="share-url-input"
        >
        <button class="copy-link-btn" @click="copyShareLink">复制链接</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoActions',
  props: {
    stats: {
      type: Object,
      default: () => ({
        likes: 0,
        coins: 0,
        collections: 0,
      }),
    },
    isLiked: {
      type: Boolean,
      default: false,
    },
    isCoined: {
      type: Boolean,
      default: false,
    },
    isCollected: {
      type: Boolean,
      default: false,
    },
    shareText: {
      type: String,
      default: '分享',
    },
    shareUrl: {
      type: String,
      default: window.location.href,
    },
    isProcessing: {
      type: Object,
      default: () => ({
        like: false,
        coin: false,
        collect: false,
      }),
    },
  },
  data() {
    return {
      showSharePanel: false,
      sharePlatforms: [
        { id: 'wechat', name: '微信', icon: '💬' },
        { id: 'weibo', name: '微博', icon: '📢' },
        { id: 'qq', name: 'QQ', icon: '🐧' },
        { id: 'copy', name: '复制链接', icon: '🔗' },
      ],
    }
  },
  beforeUnmount() {
    document.removeEventListener('click', this.closeSharePanelOnOutsideClick)
  },
  methods: {
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
    toggleLike() {
      if (!this.isProcessing.like) {
        this.$emit('toggle-like')
      }
    },
    handleCoinClick() {
      if (!this.isProcessing.coin) {
        // 实际应用中可能会弹出投币数量选择框
        this.$emit('toggle-coin')
      }
    },
    handleCollectClick() {
      if (!this.isProcessing.collect) {
        // 实际应用中可能会弹出收藏夹选择框
        this.$emit('toggle-collect')
      }
    },
    handleShareClick() {
      this.showSharePanel = !this.showSharePanel
      if (this.showSharePanel) {
        // 点击其他地方关闭分享面板
        setTimeout(() => {
          document.addEventListener('click', this.closeSharePanelOnOutsideClick)
        }, 0)
      }
    },
    shareToPlatform(platformId) {
      this.$emit('share-to-platform', platformId)
      if (platformId !== 'copy') {
        this.showSharePanel = false
      }
    },
    copyShareLink() {
      const input = this.$el.querySelector('.share-url-input')
      if (input) {
        input.select()
        document.execCommand('copy')
        this.$emit('share-to-platform', 'copy')
      }
    },
    closeSharePanelOnOutsideClick(event) {
      if (!this.$el.contains(event.target)) {
        this.showSharePanel = false
        document.removeEventListener('click', this.closeSharePanelOnOutsideClick)
      }
    },
  },
}
</script>

<style scoped>
.video-actions {
  padding: 15px 0;
  position: relative;
}

.action-buttons {
  display: flex;
  align-items: center;
}

.action-btn {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  margin-right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
}

.action-btn:last-child {
  margin-right: 0;
}

.action-btn:hover {
  color: var(--bilibili-pink, #FB7299);
  transform: translateY(-2px);
}

.action-btn.active {
  color: var(--bilibili-pink, #FB7299);
}

.action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.action-btn i {
  margin-right: 6px;
  font-size: 18px;
  display: inline-block;
}

/* 图标样式 (使用伪元素模拟) */
.icon-like::before { content: '👍'; }
.icon-coin::before { content: '💰'; }
.icon-collect::before { content: '⭐'; }
.icon-share::before { content: '🔗'; }

.action-btn.active .icon-like::before { content: '❤️'; }
.action-btn.active .icon-coin::before { content: '🪙'; }
.action-btn.active .icon-collect::before { content: '🌟'; }

/* 分享面板样式 */
.share-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 15px;
  width: 300px;
  z-index: 100;
  margin-top: 10px;
  animation: slideUp 0.2s ease;
}

.share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.share-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.share-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.share-close:hover {
  color: #333;
}

.share-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}

.share-platform {
  background: none;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 10px 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.share-platform:hover {
  background-color: #f5f5f5;
  border-color: var(--bilibili-pink, #FB7299);
  transform: translateY(-2px);
}

.share-icon {
  font-size: 20px;
}

.share-name {
  font-size: 12px;
  color: #666;
}

.share-link {
  display: flex;
  gap: 10px;
}

.share-url-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
  background-color: #f9f9f9;
}

.copy-link-btn {
  padding: 8px 16px;
  background-color: var(--bilibili-pink, #FB7299);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.copy-link-btn:hover {
  background-color: #ff5777;
}

@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .video-actions {
    padding: 12px 0;
  }
  
  .action-buttons {
    justify-content: space-around;
  }
  
  .action-btn {
    margin-right: 0;
    padding: 8px 15px;
    font-size: 13px;
  }
  
  .share-panel {
    width: 280px;
    right: 50%;
    transform: translateX(50%);
  }
  
  .share-options {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .action-btn {
    padding: 6px 10px;
  }
  
  .action-btn i {
    font-size: 16px;
  }
  
  .share-panel {
    width: 260px;
  }
  
  .share-options {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>